<template>
  <div>
    <div class="bj"></div>
    <div class="jee">
      <!-- <input type="text" v-model="mony" placeholder="请输入充值金额" /> -->
      <div class="items" v-for="item in listmon" v-bind:key="item.id" @click="checked_mony(item.xj)">
        <div>
          <span class="aa">{{item.yj}}元</span>
        </div>
        <div>
          <span class="b">{{item.xj}}元</span>
        </div>
      </div>
      <div style="width:100%">
            <yd-accordion style="background-color: #f5f5f5;">
              <yd-accordion-item title="自定义充值">
                  <div style="padding: 0rem 0.2rem;">
                      <yd-cell-group >
                          <yd-cell-item >
                              <span slot="left">金额：</span>
                              <yd-input slot="right" v-model="zdymonry" type="number" required :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入充值金额"></yd-input>
                          </yd-cell-item>
                      </yd-cell-group>
                  </div>
              </yd-accordion-item>
          </yd-accordion>
      </div>
    </div>
    <div style="padding: 0.2rem;">
      <yd-button size="large" type="primary" @click.native="show_pay_layer">自定义充值点我付款</yd-button>
    </div>

    <yd-popup v-model="show_pay" position="bottom" height="60%">
      <div class="qrdd">
        <div class="paytop">
          <span>确认付款</span>
        </div>
        <div class="typepay">
          <div class="name">
            <span>￥</span>
            <span style="font-size:0.8rem;">{{mony}}元</span>
          </div>
          <div>
            <yd-cell-item type="radio" style="height:1rem">
              <img
                style="height:0.45rem"
                slot="icon"
                src="../../static/images/organize_team/wx.png"
              />
              <span slot="left" style="font-size:0.3rem;padding-left:0.1rem">微信</span>
              <input slot="right" type="radio" value="wx" v-model="picked" />
            </yd-cell-item>
            <!-- <yd-cell-item type="radio" style="height:1rem">
                            <img style="height:0.45rem" slot="icon" src="../../static/images/organize_team/zfb.png">
                            <span slot="left" style="font-size:0.3rem;padding-left:0.1rem">支付宝</span>
                            <input slot="right" type="radio" value="zfb" v-model="picked"/>
            </yd-cell-item>-->
          </div>
        </div>
        <div class="okpay">
          <yd-button size="large" type="primary" @click.native="payment">立即付款</yd-button>
        </div>
      </div>
    </yd-popup>
  </div>
</template>
<script>
export default {
  name: "Topup",
  data() {
    return {
      listmon: [
        { id: "1", yj: "10", xj: "9.9" },
        { id: "2", yj: "50", xj: "49.9" },
        { id: "3", yj: "100", xj: "99.9" },
        { id: "4", yj: "200", xj: "199.9" },
        { id: "5", yj: "500", xj: "499.9" },
        { id: "6", yj: "1000", xj: "999.9" }
      ],
      show_pay: false,
      picked: "wx",
      mony: "0.00",
      zdymonry:""
    };
  },
  methods: {
    /*
    * 选择金额
    * 作者：gzt
    * 时间：2019-11-29 15:51:07
    */
    checked_mony(mony) {
      this.mony = mony;
      this.show_pay=true;
    },

    /*
     * 显示充值页面
     * 作者：gzt
     * 时间：2019-11-29 15:47:45
     */
    show_pay_layer() {
      if(this.zdymonry==""){
         this.$dialog.toast({
              mes: '请输入金额！',
              timeout: 1500
          });
          return false;
      }
      this.mony=this.zdymonry;
      this.show_pay = true;

    },
    /*
     * 立即付款
     * 作者：gzt
     * 时间：2019-11-29 15:38:58
     */
    payment() {
      alert(this.mony);
      let _this = this;
      let amount = this.mony;
      this.$post(
      this.$api.account.pay_insert,{
           userId:1,
           amount:100,
           source:"h5"
      }).then(res => {
           if(res.success){
              let rechargeId = res.data.rechargeId;
              _this.payok(rechargeId);
           }
        }
      )
    },

    // 确认微信支付
    payok(rechargeId){
      let _this = this;
      let outTradeNo = rechargeId;
      this.$post(
      this.$api.account.pay_wxpay,{
           outTradeNo:outTradeNo,
           title:"余额充值",
           payment:"JSAPI",
           type:2
      }).then(res => {
             if(res.success){
                //1.code为100代表openid未获取到，用户未授权登陆过，需先授权登录
                if(res.code==100){
                    // 1.1发起授权登录
                }else{
                //2.code不为100代表openid获取到，用户已经授权登陆过，可以直接发起真正支付
                  let dat= JSON.parse(res.data);
                  let url=res.data;
                  if(res.success){
                        WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', dat,
                        function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                              alert("支付成功");
                        } else if (res.err_msg == "get_brand_wcpay_request:cancel")  {
                              alert("支付过程中用户取消");
                        }else{
                              //支付失败
                              alert(res.err_msg);
                      }
                    }); 
                  }else{
                      this.$dialog.toast({
                        mes: '支付失败！',
                        timeout: 1500,
                        icon: 'error',
                    });
                  }
                }
             }else{
                 
             
             }
          //  let dat= JSON.parse(res.data);
          //  let url=res.data;
          //  if(res.success){
          //       WeixinJSBridge.invoke(
          //       'getBrandWCPayRequest', dat,
          //       function(res){
          //       if(res.err_msg == "get_brand_wcpay_request:ok" ){
          //       // 使用以上方式判断前端返回,微信团队郑重提示：
          //             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          //             alert("支付成功");
          //       } else if (res.err_msg == "get_brand_wcpay_request:cancel")  {
          //             alert("支付过程中用户取消");
          //       }else{
          //             //支付失败
          //             alert(res.err_msg);
          //     }
          //   }); 
          //  }else{
          //     this.$dialog.toast({
          //       mes: '支付失败！',
          //       timeout: 1500,
          //       icon: 'error',
          //   });
          //  }
        }
      )
    }
  }
};
</script>
<style scoped>
.bj {
  height: 3.5rem;
  background: url("../../static/user/pzybanner.png");
  background-size: 100% 100%;
}
.jee {
  padding: 0.3rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.items {
  height: 1.2rem;
  width: 2rem;
  border: 1px solid orange;
  border-radius: 5px;
  margin-bottom: 0.3rem;
  padding: 0.1rem;
}
.aa {
  font-size: 0.4rem;
  font-weight: bold;
}
.b {
  color: #999;
  font-size: 0.28rem;
}
.qrdd {
  padding: 0.3rem;
}
.paytop {
  height: 0.6rem;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.31rem;
}
.typepay {
  padding: 0.3rem 0rem;
}
.name {
  display: flex;
  font-size: 0.31rem;
  justify-content: center;
  align-items: baseline;
  padding: 0.24rem;
}
.okpay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.3rem;
}
.yd-accordion-head:after{
  height:0px;
}

</style>
